/**
 * @file PasswordInput.tsx
 * @description 密码输入组件，包含格式验证
 */

'use client'

import { Input } from 'antd'
import { LockOutlined } from '@ant-design/icons'
import { useAuth } from '@/app/context/auth-context'

/**
 * @interface PasswordInputProps
 * @description 密码输入组件属性接口
 * @property {boolean} [isConfirm] - 是否为确认密码输入框
 * @property {string} [placeholder] - 输入框占位文本
 */
interface PasswordInputProps {
  isConfirm?: boolean
  placeholder?: string
}

/**
 * @component PasswordInput
 * @description 密码输入组件
 * @param {PasswordInputProps} props - 组件属性
 * @returns {JSX.Element} 密码输入框
 */
export default function PasswordInput({ 
  isConfirm = false,
  placeholder = '请输入密码'
}: PasswordInputProps) {
  const { 
    password, 
    setPassword,
    passwordError,
    confirmPassword,
    setConfirmPassword,
    confirmPasswordError
  } = useAuth()

  const value = isConfirm ? confirmPassword : password
  const setValue = isConfirm ? setConfirmPassword : setPassword
  const error = isConfirm ? confirmPasswordError : passwordError

  return (
    <div className="mb-4">
      <Input.Password
        value={value}
        onChange={(e) => setValue(e.target.value)}
        status={error ? 'error' : ''}
        prefix={<LockOutlined />}
        placeholder={placeholder}
        size="large"
      />
      {error && (
        <div className="mt-1 text-red-500 text-sm">{error}</div>
      )}
    </div>
  )
} 